.root {
  &[data-resizing] {
    --app-shell-transition-duration: 0ms !important;
  }

  &[data-disabled] {
    --app-shell-header-offset: 0rem !important;
    --app-shell-navbar-offset: 0rem !important;
    --app-shell-aside-offset: 0rem !important;
    --app-shell-footer-offset: 0rem !important;
  }

  @mixin light {
    --app-shell-border-color: var(--mantine-color-gray-3);
  }

  @mixin dark {
    --app-shell-border-color: var(--mantine-color-dark-4);
  }
}

.navbar,
.aside,
.header,
.main,
.footer {
  transition-duration: var(--app-shell-transition-duration);
  transition-timing-function: var(--app-shell-transition-timing-function);
}

.navbar,
.aside {
  position: fixed;
  display: flex;
  flex-direction: column;
  top: var(--app-shell-header-offset, 0rem);
  height: calc(
    100dvh - var(--app-shell-header-offset, 0rem) - var(--app-shell-footer-offset, 0rem)
  );
  background-color: var(--mantine-color-body);
  transition-property: transform, top, height;

  :where([data-layout='alt']) & {
    top: 0rem;
    height: 100dvh;
  }
}

.navbar {
  inset-inline-start: 0;
  width: var(--app-shell-navbar-width);
  transition-property: transform, top, height;
  transform: var(--app-shell-navbar-transform);
  z-index: var(--app-shell-navbar-z-index);

  @mixin where-rtl {
    transform: var(--app-shell-navbar-transform-rtl);
  }

  &:where([data-with-border]) {
    border-inline-end: 1px solid var(--app-shell-border-color);
  }
}

.aside {
  inset-inline-end: 0;
  width: var(--app-shell-aside-width);
  transform: var(--app-shell-aside-transform);
  z-index: var(--app-shell-aside-z-index);

  @mixin where-rtl {
    transform: var(--app-shell-aside-transform-rtl);
  }

  &:where([data-with-border]) {
    border-inline-start: 1px solid var(--app-shell-border-color);
  }

  :where([data-scroll-locked]) & {
    visibility: var(--app-shell-aside-scroll-locked-visibility);
  }
}

.main {
  padding-inline-start: calc(var(--app-shell-navbar-offset, 0rem) + var(--app-shell-padding));
  padding-inline-end: calc(var(--app-shell-aside-offset, 0rem) + var(--app-shell-padding));
  padding-top: calc(var(--app-shell-header-offset, 0rem) + var(--app-shell-padding));
  padding-bottom: calc(var(--app-shell-footer-offset, 0rem) + var(--app-shell-padding));
  min-height: 100dvh;
  transition-property: padding;
}

.header,
.footer {
  position: fixed;
  inset-inline: 0;
  transition-property: transform, margin-inline-start, margin-inline-end;
  background-color: var(--mantine-color-body);

  :where([data-layout='alt']) & {
    margin-inline-start: var(--app-shell-navbar-offset, 0rem);
    margin-inline-end: var(--app-shell-aside-offset, 0rem);
  }
}

.header {
  top: 0;
  height: var(--app-shell-header-height);
  background-color: var(--mantine-color-body);
  transform: var(--app-shell-header-transform);
  z-index: var(--app-shell-header-z-index);

  &:where([data-with-border]) {
    border-bottom: 1px solid var(--app-shell-border-color);
  }
}

.footer {
  bottom: 0;
  height: calc(var(--app-shell-footer-height) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  transform: var(--app-shell-footer-transform);
  z-index: var(--app-shell-footer-z-index);

  &:where([data-with-border]) {
    border-top: 1px solid var(--app-shell-border-color);
  }
}

.section {
  flex-grow: 0;

  &:where([data-grow]) {
    flex-grow: 1;
  }
}
